import React, { Component } from 'react';
import { WhiteSpace,Button ,Accordion, List,} from 'antd-mobile';

const PlaceHolder=props=>(
    <div style={{
        backgroundColor: '#ebebef',
        color: 'red',
        textAlign: 'center',
        height: '50px',
        lineHeight: '50px',
        width: '100%',
    }} {...props}>
        Item
    </div>
);
const Item=List.Item;
const Brief=Item.Brief;
/*const columns=[
    {title:'标题',dataIndex:'title',key:'title',width:'20px',fixed:'left'},
    {title:'姓名',dataIndex:'a',key:'a',width:'20px'},
    {title:'身高',dataIndex:'b',key:'b',width:'20px'},
    {title:'体重',dataIndex:'c',key:'c',width:'20px'}
];
const data=[
    {title:'人物1',a:'二哈',b:'100',c:'23',key:'1'},
    {title:'人物2',a:'金毛',b:'90',c:'40',key:'2'},
    {title:'狗狗3',a:'拉布拉多',b:'50',c:'20',key:'3'}
];*/
export default class example extends Component{
    onChange=(key)=>{
        console.log(key);
    };
    state={
        disabled:''
    };
    render(){
        return(
            <div style={{paddingTop:'20px'}}>
                <div>
                    <WhiteSpace size="xs"/>
                    <PlaceHolder/>
                    <WhiteSpace size="sm"/>
                    <PlaceHolder/>
                    <WhiteSpace size="lg"/>
                    <PlaceHolder/>
                    <WhiteSpace size="xl"/>
                    <Button>start</Button>
                    <Button  loading>loading button</Button>
                    <Button  icon="check-circle-o">with icon</Button>
                </div>
                <div style={{marginTop:'20px'}}>
                    <Accordion defaultActiveKey="0" onChange={this.onChange}>
                        <Accordion.Panel header="title1">
                            <List>
                                <List.Item>content 1</List.Item>
                                <List.Item>content 2</List.Item>
                                <List.Item>content 3</List.Item>
                            </List>
                        </Accordion.Panel>
                        <Accordion.Panel header="Title 2" >this is panel content2 or other</Accordion.Panel>
                        <Accordion.Panel header="Title 3" >
                            Text text text text text text text text text text text text text text text
                        </Accordion.Panel>
                    </Accordion>
                </div>
                <div style={{marginTop:"20px"}}>
                    <List renderHeader={()=>'基本样式'}>
                        <Item extra="基本内容" >标题文字</Item>
                    </List>
                    <List renderHeader={()=>'带副标题'}>
                        <Item arrow="horizontal" multipleLine>
                            标题文字<Brief>副标题</Brief>
                        </Item>
                        <Item multipleLine arrow="horizontal" onClick={()=>{}}  platform="android"
                              thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                              extra="基本内容" align="middle" wrap
                        >
                           ListItem <Brief>设置了click事件就会有效果</Brief>
                        </Item>
                        <Item extra="其他内容" style={{ flexBasis: 'initial'}} wrap>2222222222222222222222222222222222222222222222222 </Item>

                    </List>
                    <List renderHeader={()=>'其他'}>
                        <Item disabled={this.state.disabled} onClick={()=>{console.log('click',this.state.disabled); this.setState({disabled:true});}}>点击禁用</Item>
                    </List>
                </div>
                <form>
                    <List renderHeader={()=>'验证表单'}>

                    </List>
                </form>

            </div>
        )
    }
}
